<template>
    <view>
        <u-popup
            :show="pop_show"
            :round="16"
            :closeable="true"
            mode="center"
            @close="change_pop_show"
        >
            <view class="popLayout">
                <view class="popHeader">
                    <view class="headerTitle"> {{ title }} </view>
                </view>
                <view class="popMain">
                    <view
                        v-for="item in iconData"
                        :key="item.id"
                    >
                        <view class="iconLayout" :class="current_icon === item.path && 'active' " @click="changeTypeIcon(item.path)">
                            <image
                                class="icon"
                                :src="item.path"
                                mode="scaleToFill"
                            />
                        </view>
                       
                    </view>
                </view>
                <view class="footerLayout">
                    <view class="doubleBtn">
                        <view class="cancel" @click="change_pop_show"
                            >确定</view
                        >
                        <view class="quitButton" @click="change_pop_show"
                            >取消</view
                        >
                    </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import { happenIcon, moodIcon, weatherIcon } from "@/config/journalIcon";
export default {
    props: ["pop_show", "icon_type","current_icon"],
    data() {
        return {
            iconData: [],
            title: "",
            type:""
        };
    },
    methods: {
        change_pop_show() {
            this.$emit("change_pop_show");
        },
        changeTypeIcon(path){
            this.$emit("changeTypeIcon" , path , this.type);
        }
    },
    watch: {
        icon_type: {
            handler(newVal, oldVal) {
                switch (newVal) {
                    case "weather_icon":
                        this.iconData = weatherIcon;
                        this.type = "weather"
                        this.title = "选择天气";
                        break;
                    case "mood_icon":
                        this.iconData = moodIcon;
                        this.type = "mood"
                        this.title = "选择心情";
                        break;
                    case "happen_icon":
                        this.iconData = happenIcon;
                        this.type = "happen"
                        this.title = "选择今天发生的事情";
                        break;
                }
            },
        },
    },
    onLoad() {},
};
</script>

<style lang="scss" scoped>
.popLayout {
    padding: 32rpx;
    min-width: 80vw;
    max-width: 85vw;

    .popHeader {
        display: flex;
        justify-content: center;
        align-items: center;

        .headerTitle {
            font-size: 32rpx;
            font-weight: 600;
        }
    }

    .popMain {
        margin-top: 40rpx;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        .iconLayout {
            width: 128rpx;
            height: 128rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #f3f4f5;
            border-radius: 8rpx;
            margin: 0 24rpx 24rpx 0;
            .icon{
                width: 80%;
                height: 80%;
            }
        }
        .active{
            border: 2rpx $themeColor solid ; 
        }
    }

    .footerLayout {
        .footerBtn {
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            margin-top: 40rpx;
            background: $themeColor;
            color: $supColor;
            border-radius: 32rpx;
            font-size: 32rpx;
            font-weight: 600;
        }

        .doubleBtn {
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-top: 48rpx;
            text-align: center;
            height: 88rpx;
            line-height: 88rpx;

            .cancel {
                width: 40%;
                background: #f5f4f2;
                border-radius: 24rpx;
                font-size: 32rpx;
                font-weight: 600;
            }
            .quitButton {
                background: $themeColor;
                color: $supColor;
                width: 40%;
                border-radius: 24rpx;
                font-size: 32rpx;
                font-weight: 600;
            }
        }
    }
}
</style>
